<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap 的 CSS 文件 -->
  <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/4.6.1/css/bootstrap.min.css" type="text/css"
        rel="stylesheet"/>
  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.5.1/jquery.slim.min.js"
          type="application/javascript"></script>
  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/4.6.1/js/bootstrap.bundle.min.js"
          type="application/javascript"></script>
  <script type="application/javascript">
    let data = {
      "jk":[1,1,2,3,4,5,6,7,8,9,10,12,14,16,18,20,25,30,35,40,50,60,70,80],
      "zk":[1,2,4,8,16,24,32,40,48,56,64,80,100,120,140,160,200,240,280,320,400,480,560,640]
    }
    $(function(){
      initPage();
      $("select").change(function (){
        initPage();
      })
      $("#cardNum").change(function (){
        initPage();
      })
    });

    function initPage(){
      let cardThisLevel = parseInt($("#cardThisLevel").val());
      let cardTargetLevel = parseInt($("#cardTargetLevel").val()) - 1;
      let cardType = $("#cardType").val();
      let cardNum = parseInt($("#cardNum").val());
      console.info(cardThisLevel+"-"+cardTargetLevel+"-"+cardType+"-"+cardNum);
      let dateTemp = data[cardType];
      console.info(dateTemp)
      let cardTargetNum = 0;
      if(cardTargetLevel >= cardThisLevel){
        for (let i = cardThisLevel; i <= cardTargetLevel; i++) {
          console.info(i+"-"+dateTemp[i])
          cardTargetNum = cardTargetNum+dateTemp[i];
        }
        cardTargetNum = cardTargetNum - cardNum;
        cardTargetNum = cardTargetNum>0?cardTargetNum:0;
      }else {
        cardTargetNum = 0;
      }
      $("#cardTargetNum").val(cardTargetNum);
    }
  </script>
</head>
<body>
<div class="container">
  <div class="d-flex justify-content-center" style="margin-top: 30px;">
    <from>
      <div class="form-row col-md-10">
        <div class="form-group col-md-10">
          <label for="cardType">卡片类型</label>
          <select id="cardType" class="form-control">
            <option selected value="jk">金卡</option>
            <option value="zk">紫卡</option>
          </select>
        </div>
      </div>
      <!-- 这里是需要居中对齐的内容 -->
      <div class="form-row col-md-10">
        <div class="form-group col-md-5">
          <label for="cardThisLevel">当前卡片等级</label>
          <select id="cardThisLevel" class="form-control">
            <option selected value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
          </select>
        </div>
        <div class="form-group col-md-5">
          <label for="cardNum">已有张数</label>
          <input id="cardNum" class="form-control" type="text" placeholder="Default input" value="0">
        </div>
      </div>
      <!-- 这里是需要居中对齐的内容 -->
      <div class="form-row col-md-10">
        <div class="form-group col-md-5">
          <label for="cardTargetLevel">目标卡片等级</label>
          <select id="cardTargetLevel" class="form-control">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option selected value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
          </select>
        </div>
        <div class="form-group col-md-5">
          <label for="cardTargetNum">需要卡数目</label>
          <input type="text" readonly class="form-control-plaintext" id="cardTargetNum" value="0">
        </div>
      </div>
    </from>
  </div>
</div>
</body>
</html>
